<template>
  <div class="content">
    <dv-border-box-8 style="padding: 8px">
      <h2>视频监控</h2>
      <div style="width: 29vw; height: 220px">
        <video autoplay="autoplay" width="100%" height="100%">
          <source src="../../../assets/webm/CAMERAV.webm" type="video/mp4" />
        </video>
      </div>
      <h2>事故统计</h2>
      <dv-scroll-board :config="config" style="width: 29vw; height: 220px" />
    </dv-border-box-8>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        header: ["位置", "事故状态", "事故原因"],
        data: [
          ["XX道路", "已处理", "电瓶车逆行"],
          ["XX道路", "已处理", "电瓶车逆行"],
          ["XX道路", "已处理", "电瓶车逆行"],
          ["XX道路", "已处理", "电瓶车逆行"],
          ["XX道路", "已处理", "电瓶车逆行"],
          ["XX道路", "已处理", "电瓶车逆行"],
          ["XX道路", "已处理", "电瓶车逆行"],
          ["XX道路区", "已处理", "电瓶车逆行"],
          ["XX道路", "待处理", "闯红灯"],
          ["XX道路", "待处理", "闯红灯"],
          ["XX道路", "处理中", "闯红灯"],
          ["XX道路", "处理中", "闯红灯"],
          ["XX道路", "处理中", "闯红灯"],
          ["XX道路", "待处理", "闯红灯"],
          ["XX道路", "待处理", "闯红灯"],
        ],
      },
    };
  },
};
</script>

<style scoped>
.content {
  width: 30vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
h2 {
  margin: 10px;
}
</style>
